<template>
    <div class="dialoglistDiv">
        <div class="dialogsearchDiv">
            <DatePicker type="month" format="YYYY-MM" valueformat="YYYY-MM" v-model:value="obj.req.day" />
            <span class="btn search" @click="init">搜索</span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
        </div>
        <div ref="img1" style="width:100%; height: 100%;"></div>        
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, onMounted,nextTick } from 'vue'
    import DatePicker from '@/components/date_picker.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        req: {
            day: proxy.$utils.dateFormat(new Date(), "yyyy-MM"),
            // starttime: proxy.$utils.dateAddDay(new Date(), -1, "yyyy-MM-dd"),
        },
        option: {
            tooltip: { trigger: 'axis' },
            legend: { data: ['收入', '支出'] },
            grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
            toolbox: { feature: { saveAsImage: {} } },
            xAxis: { type: 'category', boundaryGap: false, data: [] },
            yAxis: { type: 'value' },
            series: [
                { name: '收入', type: 'line', data: [] },
                { name: '支出', type: 'line', data: [] },
            ]
        },
    });
    let init = () => {
        proxy.$ajax({
            url: '/finance/table',
            data: obj.req,
            bfLoading: true
        }).then(da => {
            // console.log(d)
            if(da.success){
                let d = obj.req.day.split("-")
                let start = 1;
                let end = new Date(d[0], parseInt(d[1]), 0).getDate(); // 获取本月最后一天
                obj.option.xAxis.data = []
                obj.option.series[0].data = []
                obj.option.series[1].data = []
                while(true){
                    if(end >= start){
                        obj.option.xAxis.data.push(start) //加到底部
                        //找当天的，type==0,day==当天，所有的price加起来的值
                        let a1 = da.msg.list.filter(t => t.type=="0" && parseInt(t.day.split("-")[2]) == start).reduce((n,t)=>n+parseInt(t.price), 0)
                        obj.option.series[0].data.push(a1) //收入
                        let a2 = da.msg.list.filter(t => t.type=="1" && parseInt(t.day.split("-")[2]) == start).reduce((n,t)=>n+parseInt(t.price), 0)
                        obj.option.series[1].data.push(a2) //支出
                        start++
                    }else break;
                }
                // console.log(obj.option)
                var myChart = proxy.$echarts.init(proxy.$refs["img1"]);
                obj.option && myChart.setOption(obj.option);
            }
        }).catch(() => { })
    }
    onMounted(async () => {
        nextTick(() => {
            init()
        })
    })
</script>

<style scoped>
    ::-webkit-scrollbar { width:10px; background-color: #FFFFFF; }
    .search_select { width:100px!important; }
    .search_key { width:160px!important; }
    .listDiv { top:70px; }
    .img > div { width: 100%!important; height: 100%!important; }
    #tb ul li.li2 { width: 100px; }
    #tb ul li.li3 { width: 45px; }
    #tb ul li.li4 { width: 45px; }
</style>